<template>
  <div class="distribution-wrap">
    <el-tabs v-model="currentTabsName" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in tabsList"
        :key="item.id"
        :label="item.name"
        :name="item.id"
      >
        <el-row :gutter="32">
          <el-col :xs="24" :sm="24" :lg="8">
            <div class="chart-wrapper">
              <el-tabs
                v-model="casCadeName"
                type="card"
                @tab-click="handleCasCadeClick"
              >
                <el-tab-pane
                  v-for="item in cascadeList"
                  :key="item.id"
                  :label="item.name"
                  :name="item.id"
                >
                  {{ item.name }}
                  <pie-chartJl
                    v-if="currentCascade === item.id"
                    :key="`${currentCascade}${currentTabsName}`"
                    :type="Number(currentCascade)"
                  />
                </el-tab-pane>
              </el-tabs>
              <div class="echarts-title">级联人员结构</div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="8">
            <div class="chart-wrapper">
              <el-tabs
                v-model="activeName"
                type="card"
                @tab-click="handleOtherClick"
              >
                <el-tab-pane
                  v-for="item in cascadeList"
                  :key="item.id"
                  :label="item.name"
                  :name="item.id"
                >
                  {{ item.name }}
                  <pie-chartGql
                    v-if="currentActiveName === item.id"
                    :key="`${currentActiveName}${currentTabsName}`"
                    :type="Number(currentActiveName)"
                  />
                </el-tab-pane>
              </el-tabs>
              <div class="echarts-title">供取料人员结构</div>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="32">
          <el-col :xs="24" :sm="24" :lg="8">
            <div class="chart-wrapper">
              <PieChart
                :key="currentTabsName"
                :licenseType="1"
                :companyCode="Number(currentTabsName)"
              />
              <div class="echarts-title">级联考试成绩分布</div>
            </div>
           
          </el-col>
          <el-col :xs="24" :sm="24" :lg="8">
            <div class="chart-wrapper">
              <PieChart
                :key="currentTabsName"
                :licenseType="2"
                :companyCode="Number(currentTabsName)"
              />
              <div class="echarts-title">供取料考试成绩分布</div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import PieChartJl from "../../dashboard/PieChartJl.vue";
import PieChartGql from "../../dashboard/PieChartGql.vue";
import PieChart from "./PieChart.vue";
export default {
  components: { PieChartJl, PieChart, PieChartGql },
  data() {
    return {
      currentTabsName: "1",
      tabsList: [
        {
          id: "1",
          name: "中核兰铀",
        },
        {
          id: "2",
          name: "中核陕铀",
        },
        {
          id: "3",
          name: "四川红华",
        },
      ],
      cascadeList: [
        {
          id: "1",
          name: "性别",
        },
        {
          id: "2",
          name: "年龄",
        },
        {
          id: "3",
          name: "学历",
        },
        {
          id: "4",
          name: "工龄",
        },
      ],
      activeName: "1",
      currentActiveName: "1",
      casCadeName: "1",
      currentCascade: "1",
    };
  },
  methods: {
    handleClick(e) {
      this.currentTabsName = e.name;
    },
    handleOtherClick(e) {
      this.currentActiveName = e.name;
    },
    handleCasCadeClick(e) {
      this.currentCascade = e.name;
    },
  },
};
</script>

<style lang="scss" scoped>
.distribution-wrap {
  padding: 32px;
  background-color: #f0f2f5;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;

    .echarts-title {
      padding-bottom: 24px;
      text-align: center;
    }
  }
  ::v-deep .el-tabs__header {
    border-bottom: none;
  }

  ::v-deep .el-tabs__item {
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
    border-bottom: 1px solid #dfe4ed;
    font-size: 12px;
  }

  ::v-deep .el-tabs__item.is-active {
    border-bottom: 1px solid #1890ff;
    border-color: 1px solid #1890ff;
    background-color: #1890ff;
    color: #fff;
  }

  ::v-deep.el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item {
    padding: 0 10px;
  }
}
</style>
